<template>
    <div class="rjxt-container">
        <template v-if="screenWidth > 1920">
            <div class="rjxt-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
                <template v-if="item.position === 'banner'">
                    <img :src="item.image_url" alt="" style="width: 100%; height: auto; object-fit: cover;">
                </template>
            </div>
        </template>
        <template v-else>
            <div class="rjxt-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
                <template v-if="item.position === 'banner'">
                    <img :src="item.image_url" alt="">
                </template>
            </div>
        </template>

        <div class="rjxt-content">
            <div class="rjxt-content-item">
                <el-card class="rjxt-card">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[0].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="rjxt-card-title">
                            <p>数据分析</p>
                        </div>
                        <div class="rjxt-card-p">
                            <p>智能导览机<br>自助租赁机<br>多语言导览<br>车载娱乐影音<br></p>
                        </div>
                        <div class="rjxt-card-btn">
                            <el-button type="primary" @click="$router.push('/sjfx')">去探索</el-button>
                        </div>
                    </template>
                </el-card>
                <el-card class="rjxt-card">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[1].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="rjxt-card-title">
                            <p>设备内容</p>
                        </div>
                        <div class="rjxt-card-p">
                            <p>内容编辑<br>设备管理<br>数据统计<br></p>
                        </div>
                        <div class="rjxt-card-btn">
                            <el-button type="primary" @click="$router.push('/ewmdl')">去探索</el-button>
                        </div>
                    </template>
                </el-card>
                <el-card class="rjxt-card">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[2].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="rjxt-card-title">
                            <p>电子支付系统</p>
                        </div>
                        <div class="rjxt-card-p">
                            <p>微信<br>支付宝<br></p>
                        </div>
                        <div class="rjxt-card-btn">
                            <el-button type="primary" @click="$router.push('/dzzfxt')">去探索</el-button>
                        </div>
                    </template>
                </el-card>
                <el-card class="rjxt-card">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[3].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="rjxt-card-title">
                            <p>下载中心</p>
                        </div>
                        <div class="rjxt-card-p">
                            <p>疑问解答<br>安装教程<br>持续更新程序<br></p>
                        </div>
                        <div class="rjxt-card-btn">
                            <el-button type="primary" @click="$router.push('/xzzx')">去探索</el-button>
                        </div>
                    </template>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getRjxtList } from '@/api/rjxt'

const rjxtList = ref([])
const imgArr = ref([])

const screenWidth = ref(window.innerWidth);
// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

onMounted(() => {
    getRjxtList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
    })
})


</script>
<style lang="scss" scoped>
// 媒体查询
@media (min-width: 1025px) {
    .rjxt-container {
        width: 100%;
        height: 100%;
    }

    .rjxt-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-bottom: 100px;
        padding: 0 150px;
    }

    .rjxt-content-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-top: 100px;
    }

    .rjxt-card {
        width: 285px;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
        }
    }

    .rjxt-card-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        height: 30px;
        margin-top: -40px;
    }

    .rjxt-card-p {
        height: 120px;
        word-wrap: break-word;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.75;
        color: #989898;
        margin-top: 20px;
    }

    :deep(.el-card) {
        --el-card-border-color: #fff !important;
        margin-left: 30px;
        width: 15rem;
    }

    .rjxt-card-btn {
        text-align: center;

        :deep(.el-button) {
            width: 133px;
            height: 36px;
            line-height: 36px;
            background-color: #fff;
            border: 1px solid black;
            color: black;
            transition: all 0.3s ease;
            padding: 0;
            margin-top: 20px;

            &:hover {
                background-color: #409EFF;
                color: #fff;
            }
        }
    }
}

// 媒体查询 平板电脑
@media (min-width: 769px) and (max-width: 1024px) {
    .el-card__body {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .rjxt-container {
        width: 100%;
        height: 100%;
    }

    .rjxt-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .rjxt-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-bottom: 100px;
        padding: 0 100px;
    }

    .rjxt-content-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-top: 100px;
    }

    .rjxt-card {
        width: 200px;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
        }
    }

    .rjxt-card-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        height: 30px;
        margin-top: -40px;
    }

    .rjxt-card-p {
        height: 120px;
        word-wrap: break-word;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.75;
        color: #989898;
        margin-top: 30px;
    }

    :deep(.el-card) {
        --el-card-border-color: #fff !important;
        margin-left: 30px;
        margin-top: 20px;
        width: 15rem;
    }

    .rjxt-card-btn {
        text-align: center;

        :deep(.el-button) {
            width: 133px;
            height: 36px;
            line-height: 36px;
            background-color: #fff;
            border: 1px solid black;
            color: black;
            transition: all 0.3s ease;
            padding: 0;
            margin-top: 20px;

            &:hover {
                background-color: #409EFF;
                color: #fff;
            }
        }
    }
}

// 媒体查询 手机
@media (max-width: 768px) {
    .rjxt-container {
        width: 100%;
        height: 100%;
    }

    .rjxt-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .rjxt-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-bottom: 100px;
    }

    .rjxt-content-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-top: 100px;
    }

    .rjxt-card {
        width: 285px;
        height: 500px;
        margin-bottom: 30px;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
        }
    }

    .rjxt-card-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }

    .rjxt-card-p {
        height: 120px;
        word-wrap: break-word;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.75;
        color: #989898;
    }

    :deep(.el-card) {
        --el-card-border-color: #fff !important;
    }

    .rjxt-card-btn {
        text-align: center;

        :deep(.el-button) {
            width: 133px;
            height: 36px;
            line-height: 36px;
            background-color: #fff;
            border: 1px solid black;
            color: black;
            transition: all 0.3s ease;
            padding: 0;

            &:hover {
                background-color: #409EFF;
                color: #fff;
            }
        }
    }
}
</style>
